<template>
    <dv-border-box1>
        <div class="title">巡查</div>
        <div @click="() => {
            is_all = 200
            visible = true
            getList()
        }
            " style="
        width: 80px;
        height: 20px;
        font-size: 12px;
        margin-left: auto;
        margin-right: 20px;
        padding: 1px 4px;
        background: linear-gradient(270deg, rgba(2, 29, 78, 0.681) 0%, rgba(31, 215, 232, 0.873) 280%);
        border: 1px solid #1f99c7;
        border-radius: 10px;
        color: #1f99c7;
        cursor: pointer;
      ">
            导出
            <el-icon>
                <Download />
            </el-icon>
        </div>
        <veEcharts :option="option1" ref="zoomChart" :on-mouseclick="showTableList" />
        <el-dialog :fullscreen="fullscreen" title="巡查详情" v-model="visible" width="1200px" @closed="onReset">
            <div class="avue-crud__dialog__menu">
                <img @click="fullscreen = !fullscreen" class="quan" src="@/assets/images/quan.png" alt="">
            </div>
            <el-form :model="form" label-width="100px" inline>
                <el-form-item label="商户号">
                    <el-input size="default" v-model="form.number" placeholder="请输入" clearable></el-input>
                </el-form-item>
                <el-form-item label="商户名称">
                    <el-input size="default" v-model="form.full_name" placeholder="请输入" clearable></el-input>
                </el-form-item>
                <el-form-item label="类型">
                    <el-select size="default" v-model="form.is_patrol" placeholder="请选择" clearable>
                        <el-option label="未及时巡查数" :value="1"> </el-option>
                        <el-option label="巡查合格数" :value="2"> </el-option>
                        <el-option label="未及时审核数" :value="3"> </el-option>
                        <el-option label="巡查不合格数" :value="4"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="时间查询">
                    <el-date-picker size="default" v-model="form.date" type="daterange" range-separator="至"
                        value-format="YYYY-MM-DD" start-placeholder="开始时间" end-placeholder="结束时间"
                        @change="changeTime" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getList" size="default">搜索</el-button>
                    <el-button type="warning" @click="reset" size="default">重置</el-button>
                    <el-button type="success" @click="onDownExcel" size="default">导出</el-button>
                </el-form-item>
            </el-form>

            <el-table :data="list" max-height="500">
                <el-table-column label="id" type="index"></el-table-column>
                <el-table-column label="商户号" prop="number" width="120"></el-table-column>
                <el-table-column label="商户名称" prop="full_name" width="120"></el-table-column>
                <el-table-column label="任务名称" prop="name" min-width="180"></el-table-column>
                <el-table-column label="巡查规则" prop="rule_name" min-width="180"></el-table-column>
                <el-table-column label="类型" min-width="180">
                    <template #default="{ row }">
                        <div v-if="row.is_patrol === 1">未及时巡查数</div>
                        <div v-else-if="row.is_patrol === 2">巡查合格数</div>
                        <div v-else-if="row.is_patrol === 3">未及时审核数</div>
                        <div v-else-if="row.is_patrol === 4">巡查不合格数</div>
                    </template>
                </el-table-column>
                <el-table-column label="开始时间" prop="start_time" width="120"></el-table-column>
                <el-table-column label="结束时间" prop="end_time" width="120"></el-table-column>
                <el-table-column label="完成时间" prop="finish_time" width="120"></el-table-column>
                <el-table-column label="是否有隐患" prop="is_danger" width="120"></el-table-column>
                <el-table-column label="是否有故障" prop="is_fault" width="120"></el-table-column>
                <el-table-column label="巡查结果" prop="result" width="120"></el-table-column>
                <el-table-column label="巡查人" prop="realname" fixed="right"></el-table-column>
            </el-table>
            <el-pagination style="margin-top: 10px" background v-model:current-page="pages.page"
                v-model:page-size="pages.rows" layout="->,total, sizes, prev, pager, next, jumper" :total="total"
                @current-change="getList" @size-change="getList" />
        </el-dialog>
    </dv-border-box1>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive, toRaw } from 'vue'
import veEcharts from './veEcharts.vue'
import { Download } from '@element-plus/icons-vue'
import { pcindexPatro, homeTaskList, homeTaskListExcl } from '@/api/flueClean'
const list = ref([])
const visible = ref(false)
const is_all = ref(0)
const total = ref(0)
const id = ref(0)
const form = reactive({
    number: '',
    full_name: '',
    is_patrol: '',
    date: "",
    sta_time: '',
    end_time: ''
})
const pages = reactive({
    rows: 20,
    page: 1
})
let fullscreen = ref(false)
const option1 = reactive({
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            // Use axis to trigger tooltip
            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
        },
        backgroundColor: 'rgba(0,0,0, 0.5)',
        textStyle: {
            color: '#fff',
            fontFamily: 'myFont',
            fontSize: 14
        }
    },
    dataZoom: [
        {
            type: 'slider',
            realtime: true, // 拖动时，是否实时更新系列的视图
            start: 90,
            end: 100,
            maxValueSpan: 5,
            minValueSpan: 5,
            width: 8,
            height: '70%',
            top: '9%',
            right: '3%',
            borderRadius: 10,
            brushSelect: false, //取消刷选功能(缩放)

            yAxisIndex: [0], // 控制y轴滚动对象
            fillerColor: '#0093ff', // 滚动条颜色
            borderColor: 'rgba(17, 100, 210, 0.12)',
            backgroundColor: '#cfcfcf', //两边未选中的滑动条区域的颜色
            handleSize: 0, // 两边手柄尺寸
            showDataShadow: false, //是否显示数据阴影 默认auto
            showDetail: false, // 拖拽时是否展示滚动条两侧的文字
            zoomLock: true, // 是否只平移不缩放
            moveHandleStyle: {
                opacity: 0
            }
        },
        {
            type: 'inside',
            yAxisIndex: [0],
            start: 90,
            end: 100,
            borderRadius: 10,
            moveOnMouseMove: true, //鼠标滚轮触发滚动
            zoomOnMouseWheel: false, // 关闭滚轮缩放
            moveOnMouseWheel: true // 开启滚轮平移
        }
    ],

    //   dataZoom: [
    //     {
    //       yAxisIndex: [0],
    //       right: '4%',
    //       start: 50,
    //       end: 100
    //     }
    //   ],
    legend: {
        textStyle: {
            color: '#fff',
            fontSize: 14,
            fontFamily: 'myFont'
        }
    },
    grid: {
        left: '3%',
        right: '7%',
        top: '14%',
        bottom: '18%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        axisLabel: {
            color: '#fff',
            fontSize: 14
        }

        // fontSize:14
    },
    yAxis: {
        type: 'category',
        data: [],

        axisLabel: {
            color: '#fff',
            fontSize: 14,
            fontFamily: 'myFont'
        }
    },
    series: [
        {
            name: '未及时巡查数',
            type: 'bar',
            stack: 'total',
            label: {
                show: true
            },
            emphasis: {
                focus: 'series'
            },
            data: []
        },
        {
            name: '巡查合格数',
            type: 'bar',
            stack: 'total',
            label: {
                show: true
            },
            emphasis: {
                focus: 'series'
            },
            data: []
        },
        {
            name: '未及时审核数',
            type: 'bar',
            stack: 'total',
            label: {
                show: true
            },
            emphasis: {
                focus: 'series'
            },
            data: []
        },
        {
            name: '巡查不合格数',
            type: 'bar',
            stack: 'total',
            label: {
                show: true
            },
            emphasis: {
                focus: 'series'
            },
            data: []
        }
    ]
})
const resetForm = toRaw({ ...form })
const getList = async (page = 1) => {
    if (page === 1) pages.page = 1
    const { data } = await homeTaskList({ is_all: is_all.value, id: id.value, ...pages, ...form })
    list.value = data.data
    total.value = data.total
}
const showTableList = (e: any) => {
    visible.value = true
    id.value = e.data.id
    getList()
}
const changeTime = () => {
    if (form.date) {
        form.sta_time = form.date[0]
        form.end_time = form.date[1]
    } else {
        form.sta_time = ''
        form.end_time = ''
    }
}
const onDownExcel = () => {
    homeTaskListExcl({ is_all: is_all.value, id: id.value, ...form }).then((res) => {
        const blob = new Blob([res], {
            type: 'application/vnd.ms-excel'
        })

        if (window.navigator.msSaveOrOpenBlob) {
            //兼容IE10
            navigator.msSaveBlob(blob, '导出文件.xlsx')
        } else {
            const href = URL.createObjectURL(blob) //创建新的URL表示指定的blob对象
            const a = document.createElement('a') //创建a标签
            a.style.display = 'none'
            a.href = href // 指定下载链接
            a.download = '导出文件.xlsx' //指定下载文件名
            a.click() //触发下载
            URL.revokeObjectURL(a.href) //释放URL对象
        }
    })
}
const getData = async () => {
    const data = await pcindexPatro({})
    //商户名称
    let arr = []
    data.data.map((ret) => {
        arr.push(ret.unitName)
    })
    option1.yAxis.data = arr
    //未及时巡查
    let expiredArr = []
    data.data.map((ret) => {
        expiredArr.push({ id: ret.id, value: ret.data.expiredNum })
    })
    option1.series[0].data = expiredArr
    //未及时审核数
    let unExamineArr = []
    data.data.map((ret) => {
        unExamineArr.push({ id: ret.id, value: ret.data.unExamineNum })
    })
    option1.series[2].data = unExamineArr
    //巡查不合格数
    let unqualifiedArr = []
    data.data.map((ret) => {
        unqualifiedArr.push({ id: ret.id, value: ret.data.unqualifiedNum })
    })
    option1.series[3].data = unqualifiedArr
    //巡查合格数
    let finishArr = []
    data.data.map((ret) => {
        finishArr.push({ id: ret.id, value: ret.data.finishNum })
    })
    option1.series[1].data = finishArr
}
const reset = () => {
    form.number = ''
    form.is_patrol = ''
    getList(1)
}
let zoomChart = ref()
const onReset = () => {
    form.number = ''
    form.is_patrol = ''
    is_all.value = 0
}
onMounted(() => {
    getData()
    zoomChart.value.chartInstance.on('datazoom', (params) => {
        option1.dataZoom[0].start = params.start
        option1.dataZoom[0].end = params.end
    })
})
</script>

<style lang="scss" scoped>
.dv-border-box-1 {
    font-size: 14px;

    .title {
        color: #edf4ff;
        height: 20px;
        font-family: 'myFont';
        font-size: 20px;
    }

    .tag-wrap {
        display: flex;
        justify-content: end;
        padding: 10px 15px 0;

        .tag {
            background: linear-gradient(270deg, rgba(2, 29, 78, 0.681) 0%, rgba(31, 215, 232, 0.873) 280%);
            border: 1px solid #1f99c7;
            border-radius: 10px;
            color: #1f99c7;
            font-size: 12px;
            padding: 2px 4px;
            margin-right: 15px;
            cursor: pointer;
            transition: all 0.3s;

            &:hover {
                color: #2989f8;
                box-shadow: 0 0 10px rgb(0, 140, 255);
            }
        }

        .active {
            color: #2989f8;
            box-shadow: 0 0 10px rgb(0, 140, 255);
        }
    }

    .line {
        width: 100%;
        height: 260px;
    }
}
</style>
